<template>
  <div>
      <div>
          <el-select v-model="value" placeholder="请选择">
              <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
          </el-select>
          <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
          <el-button type="primary" plain>立即搜索</el-button>
      </div>
      <div>
          <div class="fgx">
              <el-button plain>汇总</el-button>
          </div>
          <div class="test">
              <div>安全评分：<em></em></div>       
              <div>常跑城市：<em></em></div>
              <div>总时长：<em></em></div>
              <div>总里程：<em></em></div>
              <div>违规总数：<em></em></div>              
          </div>
      </div>
      <div>
          <div class="fgx">
              <el-button plain>超速</el-button>
              <el-button plain>疲劳</el-button>
              <el-button plain>疲劳且超速</el-button>
          </div>
          <div class="test">
              <div>疲劳且超速总数：<em></em></div>
              <div>疲劳且超速里程（占比）：<em></em></div>
              <div>疲劳且超速时长（占比）：<em></em></div>
          </div>
      </div>
      <div>
          <div class="fgx">
              <el-button plain>初级提醒</el-button>
              <el-button plain>中级提醒</el-button>
              <el-button plain>严重提醒</el-button>
          </div>
          <div class="test">
              <div>超速提醒：<em></em></div>
              <div>疲劳提醒：<em></em></div>
          </div>
      </div>
      <div>
          <div class="fgx">
              <el-button plain>超速行驶</el-button>
              <el-button plain>疲劳行驶</el-button>
              <el-button plain> 疲劳且超速</el-button>
             
          </div>
          <div class="test">
              <div>车辆总数：<em></em></div>
              <div>上线车辆总数：<em></em></div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  }
}
</script>

<style>
.fgx{
  margin: 1%;
  width: 98%;
  height: 40px;
  background-color: rgb(235, 232, 232);
  border: hwb(180 60% 39%) 1px solid;
}
.test{
  display: flex;
  flex-flow: row wrap;
}
.test>div{
  width: 40%;
  margin: 10px;
}
</style>